<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自定事件---子组件向父组件传递数据</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
</head>

<body>
    <div id="app">
        <h2>v-model 创建自定义表单输入组件，进行数据双向绑定</h2>

        <p>实现一个具有双向绑定的 v-model 组件需要满足下面两个要求：</p>
        <ul>
            <li>接收一个 value 属性</li>
            <li>在有新的value时触发 input 事件</li>
        </ul>


        <my-component v-model="total"></my-component>

        <p>父组件的值： {{total}}</p>
    </div>
</body>

<script type="text/javascript">
    // 注册组件
    Vue.component('my-component', {
        props:['value'],
        template:'<input :value="value" @input="updateValue">',
        methods:{
            updateValue: function(event){
                this.$emit('input', event.target.value);
            }
        }
    });

    // Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
    var vm = new Vue({
        el: "#app",
        data:{
            total:6
        }
    })
</script>

</html>